import React, { Component,Fragment } from 'react';
import {Card,Button,notification} from 'antd'
import './ui.less'
export default class Notices extends Component {
    openNotification = (type,direction='topRight') => {
        notification.config({
            placement:direction
        })
        notification[type]({
            message:'发工资了',
            description:'上月考勤22天， 迟到12天，实发工资250，请笑纳'
        })
    }
    render() {
        return (
            <Fragment>
                <Card title="通知提醒框" className="card-wrapper">
                    <Button type="primary" onClick={() => this.openNotification('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.openNotification('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.openNotification('warning')}>Warning</Button>
                    <Button type="primary" onClick={() => this.openNotification('error')}>Error</Button>
                </Card>
                <Card title="通知提醒框" className="card-wrapper">
                    <Button type="primary" onClick={() => this.openNotification('success','topLeft')}>Success-TopLeft</Button>
                    <Button type="primary" onClick={() => this.openNotification('info','topRight')}>Info-TopRight</Button>
                    <Button type="primary" onClick={() => this.openNotification('warning','bottomLeft')}>Warning-BottomLeft</Button>
                    <Button type="primary" onClick={() => this.openNotification('error','bottomRight')}>Error-BottomRight</Button>
                </Card>
            </Fragment>
        )
    }
}